<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花样连续卡页面</title>
    <style>
      #box{
        width: 320px;
        height: 320px;
        border: red 3px solid;
        /*水平对于父元素居中*/
       /* margin: 0 auto;*/

      }
      #box1{
          display: block;
          width: 100px;
          height: 100px;
          background-color: #ff88fc;
          text-align: center;
          text-decoration: none;
          color: #efefef;
          line-height: 100px;
          position: relative;
          left: 10px;
          top: 10px;
      }

      #box2{
          display: block;
          width: 100px;
          height: 100px;
          background-color: #ff88fc;
          text-align: center;
          text-decoration: none;
          color: #efefef;
          line-height: 100px;
          position: relative;
          left:210px;
         /* left: 500px; : 向左边填充500px(向右移动500px)
          top: 100px; ：向顶部填充100px(向下移动100px)
          right: 100px; : 向右边填充100px(向左移动100px)
          bottom: 100px; 向下边填充100px(向上移动100px)*/
          bottom: 90px;
      }
      #box3{
          display: block;
          width: 100px;
          height: 100px;
          background-color: #ff88fc;
          text-align: center;
          text-decoration: none;
          color: #efefef;
          line-height: 100px;
          position: relative;
          left: 10px;
          top: 10px;
      }
      #box4{
          display: block;
          width: 100px;
          height: 100px;
          background-color: #ff88fc;
          text-align: center;
          text-decoration: none;
          color: #efefef;
          line-height: 100px;
          position: relative;
          left:210px;
          bottom: 90px;
      }

      #box5{
          display: block;
          width: 100px;
          height: 100px;
          background-color: #ff88fc;
          text-align: center;
          text-decoration: none;
          color: #efefef;
          line-height: 100px;
          position: relative;
          left: 110px;
          bottom: 290px;
      }
      #box1:hover{
          background-color: #0099fd;
      }
      #box2:hover{
          background-color: #0099fd;
      }
      #box3:hover{
          background-color: #0099fd;
      }
      #box4:hover{
          background-color: #0099fd;
      }
      #box5:hover{
          background-color: #0099fd;
      }
    </style>
</head>
<body>
  <div id="box">
      <a href="#" id="box1">连接1</a>
      <a href="#" id="box2">连接2</a>
      <a href="#" id="box3">连接3</a>
      <a href="#" id="box4">连接4</a>
      <a href="#" id="box5">连接5</a>
  </div>

</body>
</html>